<template>
  <el-dialog
  title="审核通过申请"
  v-model="dialogVisible"
  width="80%"
  :before-close="handleClose">
    <div  v-for="(item) in examinePassFormList"
        :key="item">
      <div class="contract_base_title">{{item.title}}</div>
      <base-form
        ref="formRef"
        v-model="formValue"
        :schema="item.list"
        :rules="rules"
        :options="{ span: 8, labelPosition: 'left', type: 'form', labelWidth: 120 }"
        @change="_change"
      >
        <template #phone="scope">
           <el-input
                v-model="formValue.phone"
                :placeholder="t('keys.pleaseEnter')"
                maxlength="11"
                oninput="value=value.replace(/[^\d]/g,'')"
              >
                <template #prepend>
                  <el-select
                    v-model="formValue.telAreaCode"
                    :placeholder="t('keys.pleaseSelect')"
                    clearable
                  >
                    <el-option v-for="(item, index) in telAreaCodeObj.list" :key="index" :label="item.valueCode" :value="item.valueCode" />
                  </el-select>
                </template>
              </el-input>
        </template>
      </base-form>
    </div>
    <div v-for="(item,index) in tableClumonList" :key="index">
      <div style="margin-top:20px;" @click="handelShow(item,index)"><el-icon v-if="item.show" ><CaretBottom /></el-icon>  <el-icon v-if="!item.show"><CaretRight /></el-icon> {{item.title}}</div>
      <div style="margin-top:10px;margin-bottom:10px;" v-if="item.show">
        <el-button type="primary" v-if="item.code == 'departmentList'">分配部门</el-button>
        <el-button type="primary" v-if="item.code == 'purchasingList'">分配采购组</el-button>
        <el-button type="primary" v-if="item.code == 'legalEntityList'">分配法律实体</el-button>
        <el-button type="primary" v-if="item.code == 'roleList'">分配角色</el-button>
        <el-button type="info" @click="handelBatchDelete(item)">删除</el-button>
      </div>
    
        <base-table
        v-if="item.show"
        ref="tableRefCom"
        v-loading="loading"
        border
        selection
        reserveSelection
        :row-style="{ cursor: 'pointer' }"
        row-key="id"
        rowKey="id"
        :columns="item.list"
        :data="tableList[item.code]"
        :pagination="{
          
        }"
        @row-click="onRowClick($event,item)"
        @selection-change="handleSelectionChange($event,item)"
      >
    <template #action="scope">
      <el-button @click.stop="goDetails(scope.row)" type="info" link @click="handelDelete(scope.row,item)">删除</el-button>
    </template>
  </base-table>
    </div>
   <template #footer>
      <span class="dialog-footer">
      <el-button @click="dialogVisible = false">{{ t('keys.cancel') }}</el-button>
      <el-button type="primary" @click="handelSubmit(pwdFormRef)">{{ t('keys.ok') }}</el-button>
    </span>
   </template>
</el-dialog>
</template>
<script setup>
import { reactive, ref, onMounted,nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useI18n } from 'vue-i18n'
import { validatePhone } from 'utils/validate.js'
import { validPasswordNew20 } from 'utils/validate'
import { useMock } from '../hooks/useSearch'

import {
  getLovValueInfoApi
} from 'api/home'

import { ERR_OK } from 'config/statusCode'
const { t } = useI18n() // 中英文
const { examinePassFormList, examinePassTableList } = useMock()
const tableClumonList = ref()
const formValue = ref({})
const dialogVisible = ref(false)
const tableList = ref({
  departmentList:[{}],
  purchasingList:[],
  legalEntityList:[],
  roleList:[]
 }
)
const selectTableList = ref({
  departmentList:[{}],
  purchasingList:[],
  legalEntityList:[],
  roleList:[]
})
tableClumonList.value = examinePassTableList
const  telAreaCodeObj= reactive(
  {
    // 电话区号列表list
    list: [],
    Params: {
      lovCode: 'ZIAM.AREA_CODE', // ZTNT.LOV_TYPE
      tag: '' // 特殊标记
    }
  }
) 
const checkPhone = (rule, value, callback) => {
  if (!value) {
    return callback(new Error(t('keys.phone_cant_empty')))
  }
  setTimeout(() => {
    if (!Number.isInteger(+value)) {
      callback(new Error(t('keys.please_enter_number_tips')))
    } else {
      if (validatePhone(value)) {
        callback()
      } else {
        callback(new Error(t('keys.reg_tele_empty_format_tips')))
      }
    }
  }, 100)
}
const checkEmail = (rule, value, callback) => {
  if (!value) {
    return callback(new Error(t('keys.email_cant_empty')))
  }
  setTimeout(() => {
    if (validateEmail(value)) {
      callback()
    } else {
      callback(new Error(t('keys.Email_format_error')))
    }
  }, 100)
}
const rules = reactive({
  employeeCode: [{ required: true, message: '请输入员工编码', trigger: 'blur' }],
  employeeName: [{ required: true, message: t('keys.Please_enter_the_employee_name'), trigger: 'blur' }],
  phone: [{ required: true, validator: checkPhone, trigger: 'blur' }],
  email: [{ required: true, validator: checkEmail, trigger: 'blur' }]
})
onMounted(() => {
  getLovValueInfo()
})


// 获取字典
const getLovValueInfo = async () => {
  const params = telAreaCodeObj.Params
  const { code, data } = await getLovValueInfoApi(params)
  if (code === ERR_OK) {
    telAreaCodeObj.list = data
  }
}
const showDialog = (data) => {
  dialogVisible.value = true
  console.log(47,examinePassFormList)
}

const handelShow = (item,index) => {
  // console.log(151,item,index)
  item.show = !item.show
}

const onRowClick = (val,item) => {
  selectTableList.value[item.code] = val
}
const handleSelectionChange = (val,item) => {
  selectTableList.value[item.code] = val
}

// 批量删除
const handelBatchDelete = (item) => {
  if (selectTableList.value[item.code].length == 0) {
     ElMessage({
        message:'请选中要删除的行',
        type: 'warning'
      })
  }
}

// 删除
const handelDelete = (row,item) => {
  
}
// 提交
const handelSubmit = async (pwdFormRef) => {
  if (!pwdFormRef) return
  await pwdFormRef.validate(async (valid, fields) => {
    if (valid) {
   
    }
  })
}
defineExpose({
  showDialog
})
</script>
